<template>
<div class="all">
        <div id="ListApp" >

<div class="top" >
  <div class="my_icon"><x-icon type="ios-search-strong" size="20"></x-icon></div>
  <input v-model="filter.keywords"></input>

    <span class="search" @click="onfresh">搜索</span>
</div>

          <div class="navs">
    <div class="item">

      <popup-picker v-if="my" :choosed="choosed[0]" :comstomedtitle="filter['distinct']!=null?filter['distinct']:'区域'" :data="distincts"   @on-change="onAreaChange" @on-shadow-change="onshachange"	 ></popup-picker>

</div>
     <div class="item">

       <popup-picker  v-if="my" :choosed="choosed[1]" :comstomedtitle="filter.subway!=null?filter['subway']:'地铁'" :data="subways"   @on-change="onSubwayChange" @on-shadow-change="onsubchange"></popup-picker>

      </div>

  <div class="item">

      <popup-picker  v-if="my" :choosed="choosed[2]" :comstomedtitle="filter.payway!=null?filter['payway']:'方式'" :data="fangshi"  @on-show="onShow" @on-hide="onHide" @on-change="onPaywayChange" ></popup-picker>

 </div>
  <div class="item">

    <popup-picker  v-if="my" :choosed="choosed[3]" :comstomedtitle="filter.money!=null?(filter['money'][0]+'-'+filter['money'][1]):'租金'" :data="money"  @on-show="onShow" @on-hide="onHide" @on-change="onMoneyChange" ></popup-picker>

    </div>
  <div class="item1" id="more_fileter" style="font-size: 4.5vw"> 筛选</div>
</div>


<div class="mask"></div>
          <div class="listc">
           <list :likeList="likeList" ></list>
            <div class="more" v-show="currentSize<total" @click="loadNext()">
              点击加载更多
            </div>
            <div class="tail" v-show="currentSize>=total&& start!=1">
              没有更多
            </div>
          </div>
          <div class="bottom">
          <buttom present='search'></buttom>
          </div>
    </div>

<div class="more-filter">
    <ul>
      <group></group>
      <hr style="margin-top:10px">
      <li style="line-height: 50px;height: 50px; font-size: 20px;margin-left: 10px">
        <span>朝向</span>
      </li>
      <hr>
      <li class="my">
          <div class="item">东</div>
        <div class="item">南</div>
        <div class="item">西</div>
        <div class="item">北</div>
        <div class="item">东北</div>
        <div class="item">西北</div>
        <div class="item">东南</div>
        <div class="item">西南</div>
      </li>
      <hr>
      <li style="line-height: 50px;height: 50px; font-size: 20px;margin-left: 10px">
       <span> 楼层</span>
      </li>
            <li class="my">
               <div class="item">高楼层</div>
                <div class="item">中楼层</div>
                 <div class="item">低楼层</div>
            </li>
      <hr>
      <li style="line-height: 50px;height: 50px; font-size: 20px;margin-left: 10px">
        <span>房屋亮点</span>
      </li>
             <li class="my">
               <div class="item choosed" >集中供暖</div>
                <div class="item">双卫生间</div>
                 <div class="item">近地铁</div>
                  <div class="item">随时看房</div>
                   <div class="item">精装</div>
                    <div class="item">独立卫生间</div>
                     <div class="item">押一付一</div>
                      <div class="item">月租</div>
                          <div class="item">限女生</div>
                              <div class="item">限男生</div>
                                  <div class="item">新上</div>
            </li>
      <hr>
    </ul>
</div>

</div>

</template>

<script>

import $ from "jquery";
import {Group, Search ,PopupPicker,Divider} from 'vux';
import XHr from "vux/src/components/x-hr/index";
import List from './list';
import Detail from './Detail'
import Buttom from '../util/buttom'
    export default {
        name: "Filter",
          components: {
            Buttom,
            Group,
            Detail,
            List,
            XHr,
            Divider,
            PopupPicker,
            Search
      },
      data(){
        return{
          choosed: [false,false,false,false],
          my:true,
          timer:1,
          start:1,
          house_selected:"",
          showdetail: false,
          likeList:[],
          mykeywords:null,
          money: [['不限','0-500','500-1000','1000-2000','2000-3000','3000-4000','4000-5000','5000-6000','6000-7000','8000-10000']],
          subways:[['无数据'],['无数据']],
          distincts:[['无数据'],['无数据']],
          fangshi:[['不限','整租','合租']],
          date: '',
          title1: '手机机型',
          title2: '详细机型',
          title3: '联动显示值',
          title4: '联动显示文字',
          list1: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你']],
          list2: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'], ['小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7']],
          currentSize:10,
          total:0,
          cityName:"",
          filter: {keywords:this.mykeywords}, //后期慢慢添加数据模型
          map:{}
        }
      },
      created(){
        this.filter["keywords"]  =""
          //此时迅速把数据模型定位
        var storage=window.localStorage;
        //有就写，没有为null就好
        if(storage["payway"]!=null) {
          this.choosed[2]=true;
          this.filter["payway"] = storage["payway"]
          this.onSearch();
          storage.removeItem("payway")
        }
          //加载城市

        var citylist = this.$http.loadData("/cities/allcity").then(
          (res)=>{
              //重新渲染
            this.my=false
              var arr=res.data
          var all  =  (arr.map((item)=>{return item.name}));
            for(var i in arr){
                this.map[arr[i].name+""] = arr[i].code
            }
            console.log(this.map)
            this.distincts= [all,[]]

            this.my=true
          }
        )
      },
        methods:{
          onsubchange(array){
            var linenum = array[0] + ""
            var cityName = this.cityName;

            if(array[0]=='不限'){
              this.my=false
              this.subways=[this.subways[0],[]]
              this.my=true
              return
            }
            //api调用
            this.$http.loadData(encodeURI("/devices/getAllPlat?cityName=" + cityName+"&lineName="+linenum)).then(
              (res) => {
                this.my=false
                res.data.unshift('不限')
                this.subways=[this.subways[0],res.data]
                console.log(this.subways)
                this.my=true
              })
          },
          onshachange(array) {
            var areaid = this.map[array[0] + ""] //请求网络
            this.$http.loadData(encodeURI("/areas/map?areaId=" + areaid)).then(
              (res) => {
                  var arr = res.data;
                  var all  = arr.map((item)=>{
                      return item.label;
                  })
                console.log(all)
                this.distincts=[this.distincts[0],all]
              })


          },
          onMoneyChange(val){
            if(val[0]=='不限'){
              this.my=false;
              this.choosed[3]=false
              this.filter['money']=null
              console.log( this.filter['money'])
              this.my=true
              return
            }
            this.choosed[3]=true
            this.my=false;
            val=val[0].split('-')
            var i = val[0]
            this.filter['money'] = [0,0]

            this.filter['money'][0] = parseInt(val[0])
            this.filter['money'][1] = parseInt(val[1])
            this.my=true;
            this.onSearch()
          },
          onAreaChange (val) {
            this.choosed[0]=true
            this.my=false;
            if(val[1]!=""){
              this.filter['distinct']=val[1]
            }else {
              this.filter['distinct'] = val[0]
            }
            //2.我还要根据城市得到地铁
            this.cityName=val[0]
            this.$http.loadData(encodeURI("/devices/getAllSubway?cityName=" + val[0])).then(
              (res) => {
                this.my=false;
                res.data.unshift('不限')
                  this.subways=[res.data,this.subways[1]]
                console.log(res.data)
                this.my=true;
              })
            this.my=true
            this.onSearch()
          },


          onSubwayChange(val){
            if(val[1]=='无数据'){
              return;
            }
            this.choosed[1]=true
            this.my=false;

            if(val[1]=='不限' && val[0]!='不限') {
              this.filter['subway'] = val[0]

            }
            if(val[0]=='不限'){
              this.filter['subway']=null
              this.choosed[1]=false
            }
            if(val[1]!='不限'){
              this.filter['subway']=val[1]
            }

            this.my=true;
            this.onSearch()
          },
          onPaywayChange(val){
            this.choosed[2]=true
            this.my=false;

            if(val[0]=='不限'){
              this.filter['payway']=null
              this.choosed[2]=false
            }else {
              this.filter['payway'] = val[0]
            }
            this.my=true;
            this.onSearch()
          },

          changeList10 () {
            this.list1 = [['小米1', 'iPhone1', '华为1', '情怀1', '三星1', '其他1', '不告诉你1']]
          },
          changeList11 () {
            this.list1[0].push('我是push条目')
          },
          changeList21 () {
            this.list3.push({
              name: '美国002_007',
              value: '0007',
              parent: 'usa002'
            })
          },
          loadNext(){
            this.currentSize=this.currentSize+10;
            this.onSearch()
          },
          onfresh(){
            this.currentSize=10;
            this.onSearch()
          },
          onSearch(){
            this.$http.loadDataByJson("/houses/selectByFilter?pageSize="+this.currentSize,this.filter).then(
              (res)=>{
                this.start=2;
                this.total= res.data.total;
                //一定要赋值vue才能响应
                //让他永远只有一页，但是size会不断变大
                this.likeList=res.data.records;
                for(let index in res.data.records){
                  res.data.records[index].pictureUrl = res.data.records[index].pictureUrl.split('|')[0]
                  res.data.records[index].tags = res.data.records[index].tags.split('|')
                  if(res.data.records[index].tags[0] ==''){
                    res.data.records[index].tags=[]
                  }
                }
              }

            ).catch(
              ()=>{

              }
            )
          },
          onShow () {
            console.log('on show')
          },
          onHide (type) {
            console.log('on hide', type)
          }
        },
        mounted(){
                $("#more_fileter").click(function () {
            //进行slide

            $(".more-filter").animate({left: "20%"},1000,function () {
                //结束后的回调
                //上蒙版
                $(".mask").show();
                //阻止body的滑动
                $("#first").addClass("hide-y")
            })
        });
        $(".mask").click(function () {
            //蒙版立刻消失
            $(".mask").hide();
            //退回去
            $(".more-filter").animate({left: "100%"},1000,function () {
                //结束后的回调
                //上蒙版
                $("#first").removeClass("hide-y")
            })
        })
        }
    }
</script>

<style scoped lang="less">
@unit : 25; //750 时的标准
@fontSize: 0.48rem; //通用的大小
@topHeight:unit((44 / @unit),rem);
@topItemHeight:unit((32 / @unit),rem);
@liHeight: unit((100 / @unit),rem);
@EveryItemHeight: unit((44 / @unit),rem);
@allwidth : 375;
.bottom{
  width: 100vw;
}
#detail{
  z-index: 2 ;
  width: 100%;
  height: 100%;
  position: absolute;
  top:0px;
  background-color: white;
}
*{
  margin: 0px;
  padding: 0px ;
}
.tail{
  background-color: rgba(0,0,0,0.1);
  height: 10vh;
  text-align: center;
  line-height: 10vh;
  font-size: 10px;
}
.more{
  background-color: rgba(0,0,0,0.1);
  font-size: 10px;
  height: 10vh;
  text-align: center;
  line-height: 10vh;
}
.listc{

    height:77vh;
  width: 100%;

  overflow: scroll;
}
hr{
  width: 95%;
  margin-left: 2%;
}
.all{
  position: relative;
  overflow-x:hidden;
  width: 100%;
   li{

      list-style-type: none;
    }
  #ListApp {
    background-color: rgb(242,242,242);
    height: 100vh;
    overflow-x: hidden !important;
    display: flex;
    flex-direction: column;
    align-items: center;

    .top {
      overflow: hidden;
      width: 100%;
      height: @topHeight;
      position: relative;
      .my_icon{
        position: absolute;
        top: 8px;
        width: (30 / @allwidth)vw;
        height: 30px;
        z-index: 1;
        left: 20px;
        line-height: 30px;
      }
      input{
        border-radius: 8%;
        margin-left:20px;
        width: 70vw;
        height: 30PX;
        border: none;
        padding-left: 30px;
        line-height: 30px;
        font-size: 10px;
      }
      span{
          display: block;
          position: absolute;
          top:8px;
        left: 90vw;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
      }



    }

    .navs{
      background-color: white;
       display: flex;
        width: 100%;
      height: 50px;
      box-shadow:0px 4px  10px #aaa;
      .item1{
        display: flex;
        justify-content: center;
        .icon-container{

          height: 50px;
          width: 10%;
          line-height: 50px;
        }
        line-height: 50px;
        height: 50px;
        font-size: 10px;
        text-align: center;
        width: 20%;
      }
      .item{
        margin-top: -10px;
        display: flex;
        justify-content: center;
        .icon-container{

            height: 50px;
            width: 10%;
          line-height: 50px;
        }
        line-height: 50px;
        height: 50px;
        font-size: 10px;
        text-align: center;
        width: 20%;

      }
    }


    .mask {
      display: none;
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 5%;

    }
  }

 .more-filter {

    ul{
      .my{
        display: flex;
          flex-wrap: wrap;
          .choosed{
            color:green;
            background-color: rgb(215,252,252) !important;
            border:solid rgb(34, 219, 117) 1px !important;
          }
        .item{
          text-align: center;
          line-height: 20px;
          font-size: 15px;
          padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 16px;
          padding-right: 16px;
          border-radius: 5%;
          margin: 10px;
          height:20px;
          background-color: white;
          border: solid rgba(0, 0, 0, 0.1) 1px
        }
      }
    }

      z-index: 2;
      position: absolute;
      background-color: white;
      top: 0px;
      left: 100%;
      width: 80%;
      height: 100vh;

    }
}
.hide-y{
  overflow-y: hidden;
}

</style>
